<script setup lang="ts">
import { useOrderStore } from "@/stores/orderStore";
import type { Address } from "@/types/Order";

//获取收货地址编辑组件的实例
const addressEdit = ref();
//获取切换收货地址组件的实例
const addressSwitch = ref();
// 获取订单 store 对象
const orderStore = useOrderStore();
// 发送请求获取收货地址列表
orderStore.getAddress();
// 用于存储用户新增的收货地址或用户选择的收货地址
const highestPriority = ref<Address | undefined>();
// 新增收货地址
function onAddressEdited(id: string) {
  highestPriority.value = orderStore.address.result.find(
    (item) => item.id === id
  );
}
// 最终的组件中渲染的收货地址
// 计算最终要渲染的收货地址
// 用户选择(切换)收货地址 -> 当前用户的默认收货地址 -> 收货地址列表中的第一个收货地址 -> 提示用户添加收货地址
const finalAddress = computed(() => {
  //判断是否存在用户选择(切换)收货地址
  if (typeof highestPriority.value != "undefined") {
    console.log(highestPriority.value);
    return highestPriority.value;
  }
  //判断默认地址是否存在
  const defaultAddress = orderStore.address.result.find(
    (item) => item.isDefault === 0
  );
  if (typeof defaultAddress != "undefined") return defaultAddress;
  if (orderStore.address.result.length > 0) return orderStore.address.result[0];
});
//修改收货地址
function modifyAddress() {
  //更改状态让显示框显示
  addressEdit.value.visible = true;
  //设置表单值
  addressEdit.value.formValues = {
    ...finalAddress.value,
    isDefault: finalAddress.value?.isDefault === 0 ? true : false,
  };
  //更改添加还是修改状态
  addressEdit.value.flag.isAlter = true;
}
//暴露用户收货地址
defineExpose({addressId:() => finalAddress.value?.id})
</script>
<template>
  <div class="address">
    <div class="text">
      <!-- <div class="none">您需要先添加收货地址才可提交订单。</div> -->
      <ul>
        <li><span>收货人：</span>{{ finalAddress?.receiver }}</li>
        <li>
          <span>联系方式：</span
          >{{ finalAddress?.contact.replace(/(\d{3})\d{4}(\d{4})/, "$1****3") }}
        </li>
        <li>
          <span>收货地址：</span>{{ finalAddress?.fullLocation }}
          {{ finalAddress?.address }}
        </li>
      </ul>
      <a href="javascript:" @click="modifyAddress">修改地址</a>
    </div>
    <div class="action">
      <XtxButton class="btn" @click="addressSwitch.visible = true"
        >切换地址</XtxButton
      >
      <ReceivingAddressSwitch
        ref="addressSwitch"
        @address-switched="highestPriority = $event"
        :finalAddressId="finalAddress?.id"
      />
      <XtxButton @click="addressEdit.visible = true" class="btn"
        >添加地址</XtxButton
      >
      <ReceivingAddressEdit
        @address-added="onAddressEdited"
        ref="addressEdit"
      />
    </div>
  </div>
</template>

<style scoped lang="less">
.address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }
    > ul {
      flex: 1;
      padding: 20px;
      li {
        line-height: 30px;
        span {
          color: #999;
          margin-right: 5px;
          > i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }
    > a {
      color: @xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }
  .action {
    width: 420px;
    text-align: center;
    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;
      &:first-child {
        margin-right: 10px;
      }
    }
  }
}
</style>
